<template>
  <div class="container">
    <div class="header flex">
      <div class="left flex-item flex">
        <span class="user_pic" @tap="changePic">
          <img v-if="mineInfo.headurl || mineInfo.headurl != 0" :src="mineInfo.headurl">
          <img v-else src="/static/imgs/system_user.png">
        </span>
        <div class="user_details flex-item">
          <span class="user_name">{{mineInfo.name}}</span>
          <span class="user_position">{{mineInfo.jobname}}</span>
        </div>
      </div>
      <div class="right_arrow"></div>
      <div class="change_role" v-if="loginType === 2" @tap="changeRole">切换角色</div>
    </div>

    <ul class="menu flex" v-if="work==99">
      <li class="menu_li flex-item" data-title="出勤" data-type="1" @tap="setWork">
        <span class="menu_icons cq"></span>
        <span class="words">出勤</span>
      </li>
      <li class="menu_li flex-item" data-title="请假" data-type="2" @tap="setWork">
        <span class="menu_icons qj"></span>
        <span class="words">请假</span>
      </li>
      <li class="menu_li flex-item" data-title="休息" data-type="3" @tap="setWork">
        <span class="menu_icons xx"></span>
        <span class="words">休息</span>
      </li>
      <li class="menu_li flex-item" data-title="加班" data-type="6" @tap="setWork">
        <span class="menu_icons jb"></span>
        <span class="words">加班</span>
      </li>
      <li class="menu_li flex-item" data-title="调休" data-type="5" @tap="setWork">
        <span class="menu_icons tx"></span>
        <span class="words">调休</span>
      </li>
    </ul>
    <ul class="status_ul flex" v-if="work==0">
      <li class="status_li">
        <div class="big">今日已审核为缺勤...</div>
        <div class="small">一份耕耘,才会有一份收获哦~</div>
      </li>
    </ul>
    <ul class="status_ul flex" v-if="work==1" @tap="endWork(workid,4)" style="flex-wrap: wrap;">
      <li class="flex-item">
        <span class="title">出勤时间</span>
        <span class="time">{{worktime}}</span>
      </li>
      <li class="flex-item">
        <span class="title">工作时长</span>
        <span class="time">{{worklong}}</span>
      </li>
    </ul>
    <ul class="status_ul flex" v-if="work==6" @tap="endWork(workid,7)">
      <li class="flex-item">
        <span class="title">加班时间</span>
        <span class="time">{{worktime}}</span>
      </li>
      <li class="flex-item">
        <span class="title">加班时长</span>
        <span class="time">{{worklong}}</span>
      </li>
    </ul>
    <ul class="status_ul flex" v-if="work==2">
      <li class="status_li">
        <div class="big">今日请假中...</div>
        <div class="small">一份耕耘,才会有一份收获哦~</div>
      </li>
    </ul>
    <ul class="status_ul flex" v-if="work==3">
      <li class="status_li">
        <div class="big">今日休息中...</div>
        <div class="small">一份耕耘,才会有一份收获哦~</div>
      </li>
    </ul>
    <ul class="status_ul flex" v-if="work==5">
      <li class="status_li">
        <div class="big">今日调休中...</div>
        <div class="small">一份耕耘,才会有一份收获哦~</div>
      </li>
    </ul>
    <ul class="status_ul flex" v-if="work==4">
      <li class="flex-item">
        <span class="title">今日工作结束</span>
        <span class="time" v-if="timeEnd != 0">{{worklong}}</span>
        <span class="time" v-if="timeEnd == 0">非正常打卡</span>
      </li>
      <li class="flex-item">
        <span class="reportform" @tap="reportform">填写报表</span>
        <span class="time">{{reportforms ? '已填写' : '未填写'}}</span>
      </li>
    </ul>
    <ul class="status_ul flex" v-if="work==7">
      <li class="flex-item">
        <span class="title">今日加班结束</span>
        <span class="time">{{worklong}}</span>
      </li>
    </ul>
    <ul class="mine_ul">
      <li
        class="mine_details flex"
        data-url="/pages/worker/attendanceRecord/attendanceRecord"
        @tap="navigateTo"
      >
        <div class="left_part flex-item">
          <i class="mine_icons cq"></i>
          出勤记录
        </div>
        <div class="grey_arrow"></div>
      </li>
      <li class="mine_details flex" data-url="/pages/worker/mysalary/mysalary" @tap="navigateTo">
        <div class="left_part flex-item">
          <i class="mine_icons gz"></i>
          我的工资
        </div>
        <div class="grey_arrow"></div>
      </li>
      <li class="mine_details flex set" data-url="/pages/worker/setting/setting" @tap="navigateTo">
        <div class="left_part flex-item">
          <i class="mine_icons setting"></i>
          设置
        </div>
        <div class="grey_arrow"></div>
      </li>
      <li class="mine_details flex" data-url="/pages/worker/about/about" @tap="navigateTo">
        <div class="left_part flex-item">
          <i class="mine_icons about"></i>
          关于美易通
        </div>
        <div class="grey_arrow"></div>
      </li>
    </ul>
    <div class="sign_out" @tap="singout">退出账号</div>
    <!-- 签到弹窗start -->
    <div class="mask" v-if="mapshow"></div>
    <div class="map_pop" v-show="mapshow">
      <div class="map_title">确定今天{{menutitle}}吗？</div>
      <map id="myMap" class="myMap" :latitude="latitude" :longitude="longitude" show-location></map>
      <div class="location">当前定位地址：{{location.address}}</div>
      <div class="submit flex">
        <div class="cancel flex-item" @tap="cancelMap">取消</div>
        <div class="sure flex-item" @tap="attendance">确定</div>
      </div>
    </div>
    <!-- 签到弹窗end -->
    <!-- 签退弹窗start -->
    <div class="mask" v-if="endmapshow"></div>
    <div class="map_pop" v-show="endmapshow">
      <div class="map_title">{{menutitle}}</div>
      <map id="myMap" class="myMap" :latitude="latitude" :longitude="longitude" show-location></map>
      <div class="location">当前定位地址：{{location.address}}</div>
      <div class="submit flex">
        <div class="cancel flex-item" @tap="endcancelMap">取消</div>
        <div class="sure flex-item" @tap="endAttendance">确定</div>
      </div>
    </div>
    <!-- 签退弹窗end -->
  </div>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
import Toast from '@/utils/toast'
import moment from 'moment'
// 引入SDK核心类
import QQMapWX from '@/utils/qqmap-wx-jssdk'
let mapCtx
const wxmap = new QQMapWX({
  key: 'LBPBZ-MJIWU-Q7GVH-4XHOX-X6AIJ-I5F7X' // 必填
});
export default {
  data () {
    return {
      menutitle: '',
      menushow: true,
      latitude: 0, // 纬度
      longitude: 0, // 经度
      location: {},
      mapshow: false,
      endmapshow: false,
      mineInfo: {},
      work: 99,
      workid: 0,
      worktime: 0,
      worklong: 0,
      worktype: 0,
      loginType: 0,
      timeEnd: 0,
      workaddress: '',
      workendId: 0,
      workendType: 0,
      workflag: 0,
      reportforms: ''
    }
  },

  components: {},
  created () {
    // 调用应用实例的方法获取全局数据
  },
  async onLoad () {
    this.loginType = wx.getStorageSync('login_type')
    await Promise.all([
      this.getuserinfo(),
      this.getwork()
    ])
  },
  async onShow () {
    this.loginType = wx.getStorageSync('login_type')
    await Promise.all([
      this.getuserinfo(),
      this.getwork()
    ])
  },
  onReady () {
    mapCtx = wx.createMapContext('myMap')
  },
  methods: {
    async getuserinfo () {
      let userId = wx.getStorageSync('userInfo').user_id
      const res = await api.getuserinfo({ user_id: userId });
      if (res.code === '100') {
        this.mineInfo = res.data[0]
        wx.setStorageSync('headid', res.data[0].headid)
      }
    },
    navigateTo (e) {
      let urlinfo = e.mp.currentTarget.dataset.url
      // wx.navigateTo({
      //   url: urlinfo
      // })
      this.$router.push({ path: urlinfo });
    },
    setWork (e) {
      let authority = wx.getStorageSync('userInfo').authority;
      let type = e.mp.currentTarget.dataset.type
      this.worktype = e.mp.currentTarget.dataset.type
      if (!authority.base_set_work) {
        Toast('您没有出勤权限！')
        return false
      }
      if (type === 5) {
        if (this.mineInfo.restday <= 2) {
          Toast('您目前没有可调休的天数！', 'noicon')
          return false;
        }
      };
      // 设置权限
      // let that = this;
      this.menutitle = e.mp.currentTarget.dataset.title;
      this.mapshow = true;
      this.getCenterLocation()
      // wx.showModal({
      //   title: `${that.menutitle}`,
      //   content: `确定今天${that.menutitle}吗`,
      //   confirmColor: '#FF4444',
      //   success: res => {
      //     if (res.confirm) {
      //       this.workOnwork(type)
      //     } else {
      //     }
      //   }
      // });
    },
    // 执行出勤
    async workOnwork (obj) {
      let userId = wx.getStorageSync('userInfo').user_id;
      let longitude = this.longitude;
      let latitude = this.latitude;
      let address = this.location.address;
      const res = await api.postonwork({ user_id: userId, type: obj, longitude: longitude, latitude: latitude, address: address });
      if (res.code === '100') {
        this.work = obj;
        this.getwork();
      }
    },
    async getwork () {
      let userId = wx.getStorageSync('userInfo').user_id
      const res = await api.getuserwork({ user_id: userId });
      if (res) {
        if (res.code === '100') {
          this.mapshow = false;
          this.endmapshow = false;
          this.work = res.data.type;
          if (res.data.type === 1 || res.data.type === 6) {
            this.workid = res.data.id
            this.worktime = moment.unix(res.data.time_start).format('HH:mm:ss a');
            this.worklong = parseInt((moment().unix() - res.data.time_start) / 3600) + '小时' + parseInt((moment().unix() - res.data.time_start) % 3600 / 60) + '分钟';
            this.timeEnd = res.data.time_end;
            this.workaddress = res.data.address;
            this.reportforms = res.data.reportforms;
          }
          if (res.data.type === 4 || res.data.type === 7) {
            this.worklong = parseInt((res.data.time_end - res.data.time_start) / 3600) + '小时' + parseInt((res.data.time_end - res.data.time_start) % 3600 / 60) + '分钟';
            this.timeEnd = res.data.time_end;
            this.workaddress = res.data.address;
            this.reportforms = res.data.reportforms;
          }
        } else {
          this.work = 99;
          this.worktime = 0;
          this.worklong = 0;
          this.mapshow = false;
          this.endmapshow = false;
        }
      } else {
      }
    },
    endWork (workid, worktype) {
      // 4 结束考勤 7 结束加班
      this.workendId = workid;
      this.workendType = worktype;
      this.menutitle = '确定结束今天的工作吗？';
      this.endmapshow = true;
      this.getCenterLocation()
      // wx.showModal({
      //   title: `工作结束...`,
      //   content: `确定结束今天的工作吗？`,
      //   confirmColor: '#FF4444',
      //   success: res => {
      //     if (res.confirm) {

      //     } else {
      //     }
      //   }
      // });
    },
    async workEndwork (obj, type) {
      let longitude = this.longitude;
      let latitude = this.latitude;
      let address = this.location.address;
      const res = await api.postendwork({ id: obj, type: type, longitude: longitude, latitude: latitude, address: address });
      if (res.code === '100') {
        this.work = 4;
        this.getwork();
      }
    },
    getCenterLocation () {
      let that = this;
      wx.getLocation({
        type: 'gcj02',
        success (res) {
          that.latitude = res.latitude
          that.longitude = res.longitude
          // 调用接口
          wxmap.reverseGeocoder({
            location: {
              latitude: that.latitude,
              longitude: that.longitude
            },
            success: function (info) {
              if (info.status === 0) {
                that.location = info.result
              }
            },
            fail: function (info) {
              console.log(info);
            },
            complete: function (info) {
              console.log(info)
            }
          })
        }
      })
      mapCtx.getCenterLocation({
        success: function (res) {
          mapCtx.moveToLocation()
        }
      })
    },
    moveToLocation () {
      this.mapCtx.moveToLocation()
    },
    cancelMap () {
      this.mapshow = false
    },
    attendance () {
      let type = this.worktype
      this.workOnwork(type)
    },
    endcancelMap () {
      this.endmapshow = false
    },
    endAttendance () {
      this.workEndwork(this.workendId, this.workendType)
    },
    reportform () {
      // wx.navigateTo({
      //   url: '/pages/worker/reportform/reportform'
      // })
      this.$router.push({ path: '/pages/worker/reportform/reportform' });
    },
    changePic () {
      // wx.navigateTo({
      //   url: '/pages/worker/updatePic/updatePic'
      // })
      this.$router.push({ path: '/pages/worker/updatePic/updatePic' });
    },
    changeRole () {
      // wx.navigateTo({
      //   url: '/pages/worker/demoaccount/demoaccount'
      // })
      this.$router.push({ path: '/pages/worker/demoaccount/demoaccount' });
    },
    singout () {
      wx.removeStorageSync('userInfo')
      wx.removeStorageSync('params_userid')
      wx.removeStorageSync('headid')
      wx.removeStorageSync('login_type')
      this.$router.push({ path: '/pages/basic/login/login', reLaunch: true });
    }
  }
}
</script>

<style scoped>
.header {
  width: 100%;
  background: #ff4444;
  padding: 60rpx;
  padding-top: 32rpx;
  position: relative;
}
.header .change_role {
  position: absolute;
  top: 38%;
  right: 18rpx;
  width: 164rpx;
  height: 60rpx;
  background: #fff;
  text-align: center;
  line-height: 60rpx;
  color: RGBA(255, 68, 68, 1);
  border-radius: 24rpx;
  font-size: 28rpx;
}
.user_pic {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}
.user_pic img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}
.user_details {
  margin-left: 20rpx;
}
.user_details span {
  display: block;
  font-size: 32rpx;
  color: #fff;
  font-weight: 400;
  line-height: 42rpx;
}
.user_details .user_name {
  margin-bottom: 32rpx;
}
.right_arrow {
  position: absolute;
  top: 50%;
  right: 48rpx;
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/withe_arrow.png) no-repeat;
  background-size: 100%;
  transform: translateY(-50%);
}
.menu {
  width: 100%;
  background: #fff;
  padding: 38rpx 64rpx;
  margin-bottom: 20rpx;
}
.menu .menu_li {
  margin-right: 76rpx;
}
.menu .menu_li:last-child {
  margin-right: 0;
}
.menu .menu_li span {
  display: block;
}
.menu .menu_li .menu_icons {
  width: 64rpx;
  height: 64rpx;
}
.menu .menu_li .menu_icons.cq {
  background: url(http://mytimg.178mr.com/mine_turn.png) no-repeat;
  background-size: 100%;
}
.menu .menu_li .menu_icons.qj {
  background: url(http://mytimg.178mr.com/mine_leave.png) no-repeat;
  background-size: 100%;
}
.menu .menu_li .menu_icons.xx {
  background: url(http://mytimg.178mr.com/mine_rest.png) no-repeat;
  background-size: 100%;
}
.menu .menu_li .menu_icons.jb {
  background: url(http://mytimg.178mr.com/mine_overwork.png) no-repeat;
  background-size: 100%;
}
.menu .menu_li .menu_icons.tx {
  background: url(http://mytimg.178mr.com/mine_takework.png) no-repeat;
  background-size: 100%;
}
.menu .menu_li .words {
  font-size: 28rpx;
  font-weight: 400;
  line-height: 38rpx;
  color: #999;
  margin-top: 16rpx;
  text-align: center;
}
.mine_ul {
  width: 100%;
}
.mine_ul li {
  width: 100%;
  background: #fff;
  padding: 20rpx 46rpx;
  margin-bottom: 20rpx;
  font-size: 32rpx;
  color: #333;
}
.mine_ul li.set {
  position: relative;
  margin-bottom: 0;
}
.mine_ul li.set::after {
  content: "";
  position: absolute;
  width: 704rpx;
  height: 2rpx;
  background: rgba(153, 153, 153, 0.1);
  bottom: 0;
  right: 0;
}
.mine_ul li .mine_icons {
  width: 28rpx;
  height: 30rpx;
  display: inline-block;
  margin-right: 28rpx;
  position: relative;
  top: 4rpx;
}
.mine_ul li .mine_icons.cq {
  height: 33rpx;
  background: url(http://mytimg.178mr.com/attendancerecord.png) no-repeat;
  background-size: 100%;
}
.mine_ul li .mine_icons.gz {
  background: url(http://mytimg.178mr.com/wages.png) no-repeat;
  background-size: 100%;
}
.mine_ul li .mine_icons.setting {
  background: url(http://mytimg.178mr.com/setting.png) no-repeat;
  background-size: 100%;
}
.mine_ul li .mine_icons.about {
  background: url(http://mytimg.178mr.com/aboutmyt.png) no-repeat;
  background-size: 100%;
}
.mine_ul li .grey_arrow {
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
}

.status_ul {
  width: 100%;
  padding: 54rpx 0;
  background: #fff;
  margin-bottom: 20rpx;
}
.status_ul li {
  width: 50%;
}
.status_ul li:last-child {
  border-left: 2rpx solid rgba(153, 153, 153, 0.3);
}
.status_ul li span {
  display: block;
  text-align: center;
}
.status_ul .status_li {
  width: 100%;
  border: none;
  color: rgba(51, 51, 51, 1);
}
.status_ul .status_li div {
  width: 100%;
  margin-bottom: 20rpx;
  text-align: center;
}
.status_ul .status_li div.small {
  font-size: 28rpx;
  margin-bottom: 0rpx;
}
.status_ul .status_li div.big {
  font-size: 32rpx;
  color: #ff4444;
}
.status_ul li span.title {
  font-size: 28rpx;
  font-weight: 400;
  color: #999;
}
.status_ul li span.time {
  margin-top: 18rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.map_pop {
  position: fixed;
  width: 624rpx;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 32rpx;
  background: #fff;
  border-radius: 20rpx;
  z-index: 2;
}
.map_pop .map_title {
  font-size: 32rpx;
  color: #ff4444;
  width: 100%;
  text-align: center;
  margin-bottom: 20rpx;
}
.myMap {
  width: 100%;
  height: 400rpx;
}
.map_pop .location {
  line-height: 40rpx;
  font-size: 28rpx;
  color: #333;
  margin-top: 20rpx;
}
.map_pop .submit {
  width: 400rpx;
  margin: 0 auto;
  margin-top: 40rpx;
}
.map_pop .submit div {
  width: 150rpx;
  height: 60rpx;
  margin-right: 50rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 28rpx;
  color: #fff;
  border-radius: 40rpx;
}
.map_pop .submit .cancel {
  background: #999;
}
.map_pop .submit .sure {
  background: #ff4444;
}
.map_pop .submit div:last-child {
  margin-right: 0;
}
.sign_out {
  margin: 54rpx auto;
  width: 614rpx;
  height: 72rpx;
  background: #ff4444;
  border-radius: 48rpx;
  line-height: 72rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 72rpx;
  text-align: center;
}
.workaddress {
  margin-top: 20rpx;
  width: 100% !important;
  padding: 0px 86rpx;
  text-align: left;
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
  word-break: break-all;
}
.endworkaddress {
  margin-top: 10rpx;
  font-size: 28rpx;
}
.reportform {
  width: 180rpx;
  padding: 10rpx;
  margin: 0 auto;
  background: #ff4444;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
}
</style>
